<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- Bootstrap -->

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->
    <style>
       .allinfo{
            background: #e5e7ea;
       }
        .title{
            background: #c9cbcd;
        }
    </style>
</head>
<body>
<div class="all">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"class="active" th:each="as,asStat : ${assets}">
            <a th:href="'#assets'+${as.getAssetsID()}"aria-controls="home" role="tab" data-toggle="tab">
                <span
                th:text="'资产'+${asStat.index+1}">
                </span>
            </a>
        </li>
        <li role="presentation" th:each="as,asStat : ${assets}"><a th:href="'#user'+${as.getAssetsID()}" aria-controls="profile" role="tab"
                                                  data-toggle="tab">使用人员</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="background-color: #9d9d9d">
        <span id="ss"></span>
        <div role="tabpanel" class="tab-pane active allinfo" th:each="as,asStat : ${assets}" th:id="'assets'+${as.getAssetsID()}">

            <h4 class="list-group-item title" >设备编号: <span th:text="${as.getDeviceID()}?: 'None'"></span>
                &nbsp;&nbsp;  资产编号: <span th:text="${as.getAssetsID()}?: 'None'"></span>
            </h4>
            <ul class="list-group">
                <li class="list-group-item allinfo">
                    类型: <span th:text="${as.getAssetsType()}?: 'None'"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    类别: <span th:text="${as.getAssetsCategory()}?: 'None'"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    所属部门: <span th:text="${as.getDepartment()}?: 'None'"></span>
                </li>
                <li class="list-group-item allinfo">
                    <fieldset class="allinfo">
                    <div class="form-group">
                        <div class="col-sm-2 infoline"> 性能状态: <span class="state" th:text="${as.getPState()}"></span></div>
                        <div class="col-sm-2 infoline">资产状态: <span class="state" th:text="${as.getAState()}"></span></div>
                        <div class="col-sm-4 infoline">出厂编号: <span th:text="${as.getFactoryID()}?: 'None'"></span></div>
                        <div class="col-sm-4 infoline">资产名称: <span th:text="${as.getAssetsName()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">规格型号: <span th:text="${as.getModels()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">供应商: <span th:text="${as.getSupplier()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">厂区: <span th:text="${as.getFaArea()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">区域: <span th:text="${as.getArea()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline"> 详细位置: <span th:text="${as.getLocation()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">部门: <span th:text="${as.getDepartment()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline">工序: <span th:text="${as.getProductionSetp()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline"> 需求报告编号: <span th:text="${as.getRequireID()}?:'None'"></span></div>
                        <div class="col-sm-2 infoline">技术协议号: <span th:text="${as.getAgreementID()}?:'None'"></span></div>
                        <div class="col-sm-2 infoline"> 合同号: <span th:text="${as.getContractID()}?:'None'"></span></div>
                        <div class="col-sm-2 infoline"> 收货单号: <span th:text="${as.getReceiptID()}?:'None'"></span></div>
                        <div class="col-sm-2 infoline"> 报废/转售单号: <span th:text="${as.getOutID()}?:'None'"></span></div>
                        <div class="col-sm-4 infoline"> 入厂日期: <span th:text="${as.getEntryDate()}?:'None'"></span></div>
                        <div class="col-sm-4 infoline"> 备注: <span th:text="${as.getRemark()}?:'None'"></span></div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 infoline"> 责任人: <span th:text="${as.getPersonliable()}?: 'None'"></span></div>
                        <div class="col-sm-2 infoline"> 责任人工号: <span th:text="${as.getPersonliableID()}?:'None'"></span></div>
                    </div>
                    </fieldset>
                </li>
            </ul>
        </div>
        <!-- 使用人员-->
        <div role="tabpanel" class="tab-pane allinfo" th:each="as,asStat : ${assets}" th:id="'user'+${as.getAssetsID()}">
            <h4 class="list-group-item ">使用人员: <span th:text="${users[0].getUserName()}?: '无'"></span></h4>

            <div class="list-group allinfo">
                <a href="#" class="list-group-item ">工号: <span th:text="${users[0].getUserID()}?: 'None'"></span></a>
                <p href="#" class="list-group-item ">部门: <span
                        th:text="${users[0].getUserDepartment()}?: 'None'"></span></p>
                <p href="#" class="list-group-item ">电话: <span th:text="${users[0].getTelephone()}?: 'None'"></span></p>
                <p href="#" class="list-group-item ">座机: <span th:text="${users[0].getLphone()}?: 'None'"></span></p>
            </div>
        </div>
    </div>

</div>
</body>


</body>
</html>
